import { useState, useEffect } from 'react'
import './nezha.css'
const mockData = {
    code: 200,
    data: [
        {
            name: '哪吒',
            avatar: 'http://10.2.35.4/nezha2/nezha.jpg',
            desc: '我命由我不由天，是魔是仙，我自己说了才算！',
            animate: 'bounceIn'
        },
        {
            name: '敖丙',
            avatar: 'http://10.2.35.4/nezha2/aobing.webp',
            desc: '哪吒是我最好的朋友！',
            animate: 'fadeIn'
        },
        {
            name: '敖闰',
            avatar: 'http://10.2.35.4/nezha2/aorun.jpg',
            desc: '西海龙王——白龙马之母，敖光的妹妹',
            animate: 'zoomIn'
        },
        {
            name: '敖光',
            avatar: 'http://10.2.35.4/nezha2/aoguang.jpg',
            desc: '东海龙王，帅的没边',
            animate: 'flip'
        },
        {
            name: '太乙真人',
            avatar: 'http://10.2.35.4/nezha2/taiyi.jpeg',
            desc: '你打我噻~你打我噻',
            animate: 'swing'
        }, {
            name: '申公豹',
            avatar: 'http://10.2.35.4/nezha2/shengongbao.jpg',
            desc: '人心中的成见是一座大山',
            animate: 'heartBeat'
        }
    ],
    message: 'success'
}
function NezhaList() {
    const [listData, setListData] = useState([]) // 用来存放服务端发送来的任务列表数据
    const [loading, setLoading] = useState(false) // 用来管理请求的状态

    useEffect(() => {
        setLoading(true)
        setTimeout(() => {
            setListData(mockData.data)
            setLoading(false)
        }, 3000);
    }, [])
    return <>
        <h1>《哪吒2魔童闹海》</h1>
        {loading ? <div>数据加载中</div> : <div className="container">
            {
                listData.map((item) => {
                    return <div className={"list-item animate__animated animate__" + item.animate}>
                        <img src={item.avatar} alt="" />
                        <span>{item.name}</span>
                        <p>{item.desc}</p>
                    </div>
                })
            }
        </div>}


    </>
}

export default NezhaList;